/** 注册页面 */
import React, { Component } from 'react'

import { Button, Form, Input, Card } from 'antd';
import './LoginReg.css'

export default class Reg extends Component {

  onFinish(values) {
    console.log('Success:', values);
    // 调用登录请求
  };
  onFinishFailed(errorInfo) {
    console.log('Failed:', errorInfo);
  };

  render() {
    return (
      <div className='login-reg-box'>
        <Card title="新用户注册" extra={<a href="/login">登录</a>} style={{ width: 400 }}>
          <Form
            name="basic"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={this.onFinish.bind(this)}
            onFinishFailed={this.onFinishFailed.bind(this)}
            autoComplete="off"
          >
            <Form.Item
              label="账号:"
              name="username"
              rules={[{ required: true, message: '注册账号不能为空!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码:"
              name="password"
              rules={[{ required: true, message: '注册密码不能为空!' }]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              label="确认密码:"
              name="confirm"
              rules={[{ required: true, message: '确认密码不能为空!' }]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              label="昵称:"
              name="nickname"
              rules={[{ required: true, message: '昵称不能为空!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
              <Button type="primary" htmlType="submit">
                注册
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}
